<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<script src="lib/vue.js"></script>
		<script src="lib/vue-router.js"></script>
		<style>
			/* vue-router 官方的效果格式 */
			.router-link-active {
				color: red;
				font-weight: 800;
				font-style: italic;
				font-size: 0.3125rem;
			}

			/* 自己定义 */
			.colesDemo {
				color: green;
				font-size: 3.125rem;
			}
		</style>

	</head>

	<body>
		<div id="app">
			<!--    路由跳转流程  第一步 a 链接触发修改url后缀，vue 路由匹配# 后面的path信息地址-->
			<!--    <a href="#/login">百度</a>-->
			<!--    <a href="#/zhuce ">google</a>-->
			<!--    官方提供跳转按钮  默认展示 tag="span"-->
			<router-link to="/login" tag="span">登录</router-link>
			<router-link to="/zhuce">注册</router-link>
			<!-- 参数传输参数测试 -->
			<router-link to="/datatest?id=de&name=cesshi">参数测试1</router-link>
			<!-- 传参方式2 -->
			<router-link to="/data2/12">参数测试2</router-link>
			<!-- 路由嵌套父子路由 使用方式-->
			<router-link to="/persom">父路由</router-link>
			<!--    页面注册占位 第五步-->
			<router-view></router-view>
		</div>
		<template id="tmp1">
			<div>
				<h1> 这是父子路由</h1>
				<router-link to="/toPersom">这是子组件</router-link>
				<router-view></router-view>
			</div>
		</template>

		<script>
			//第二步 创建组件
			var login = {
				template: '<h1>登录页面</h1>',
				
			}
			var zhuce = {
				template: '<h1>注册页面</h1>'
			}
			var data = {
				template: '<h2>路由参数传递方式1----{{msg}}---{{$route.query.id}}-{{$route.query.name}}</h2>',
				data() {
					return {
						msg: '123'
					}
				},
				created() {
					// 路由对象this.$route
					console.log(this.$route)
					console.log(this.$route.query.id)
					console.log(this.$route.query.name)
				}

			}
			var data2 = {
				template: '<h1>路由参数传递方式1----{{id}}</h2>',
				data() {
					return {
						id: null
					}
				},
				created() {
					// 路由对象this.$route
					console.log(this.$route)
					console.log(this.$route.params.id)
					this.id = this.$route.params.id

				}
			}
			var persom = {
				template: '#tmp1'
			}
			var toPersom = {
				template: '<h2>我是子组件</h2>'
			}
			// 第一步 创造路由对象
			var vueroutr = new VueRouter({
				//第三步
				// 路由列表
				routes: [
					//
					//组件必须是对象渲染要不是对象渲染就会识别失败
					//直接在路由对象中进行重定向的方法 
					{
						path: '/',
						redirect: "login"
					},
					{
						path: '/login',
						component: login
					},
					{
						path: '/zhuce',
						component: zhuce
					}, {
						path: "/datatest",
						component: data
					}, {
						path: "/data2/:id",
						component: data2
					},
					{
						path: '/persom',
						component: persom,
						children: [{
							path: '/toPersom',
							component: toPersom
						}]
					}
				],
				// 自定义显示效果
				linkActiveClass: 'colesDemo'
			})
			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {},
				//第四部路由进行注册  router 绑定
				router: vueroutr,
			    
			});
			Vue.config.devtools = true
		</script>
	</body>
</html>
